class Board {
	canvas = document.getElementsByTagName("canvas")[0];
	width = 50;
	height = 50;
	distance = 5;

	init = function(view) {
		this.backgrounds();
		this.rects();
		this.rows();
		this.cols();
		this.bias();
		this.centers();
		this.texts();
		this.numbers(view);
	};

	line = function(x1, y1, x2, y2, color, lineWidth) {
		let context = this.canvas.getContext("2d");
		context.strokeStyle = color;
		context.lineWidth = lineWidth;
		context.beginPath();
		context.moveTo(y1 * this.width, x1 * this.height);
		context.lineTo(y2 * this.width, x2 * this.height);
		context.stroke();
		context.closePath();
	};

	rows = function() {
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		context.beginPath();
		for (let i = 0; i < 10; i++) {
			this.line(i, 0, i, 8, "black", 1);
		}
		context.closePath();
		context.translate(-this.width, -this.height);
	};

	cols = function() {
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		context.beginPath();
		for (let i = 0; i < 9; i++) {
			this.line(0, i, 4, i, "black", 1);
			this.line(5, i, 9, i, "black", 1);
		}
		this.line(4, 0, 5, 0, "black", 1);
		this.line(4, 8, 5, 8, "black", 1);
		context.closePath();
		context.translate(-this.width, -this.height);
	};

	bias = function() {
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		context.beginPath();
		this.line(0, 3, 2, 5, "black", 1);
		this.line(0, 5, 2, 3, "black", 1);
		this.line(7, 3, 9, 5, "black", 1);
		this.line(9, 3, 7, 5, "black", 1);
		context.closePath();
		context.translate(-this.width, -this.height);
	};

	backgrounds = function() {
		let context = this.canvas.getContext("2d");
		context.beginPath();
		context.fillStyle = "LightGray";
		context.fillRect(0, 0, this.width * 10, this.height * 11);
		context.fill();
		context.closePath();
	};

	center = function(x, y, color, lineWidth) {
		let context = this.canvas.getContext("2d");
		context.strokeStyle = color;
		context.lineWidth = lineWidth;
		let left = y * this.width;
		let top = x * this.height;
		if (y < 8) {
			context.beginPath();
			context.moveTo(left + this.distance, top - this.distance);
			context.lineTo(left + this.distance, top - this.distance * 3);
			context.stroke();
			context.closePath();
			context.beginPath();
			context.moveTo(left + this.distance, top - this.distance);
			context.lineTo(left + this.distance * 3, top - this.distance);
			context.stroke();
			context.closePath();
			context.beginPath();
			context.moveTo(left + this.distance, top + this.distance);
			context.lineTo(left + this.distance, top + this.distance * 3);
			context.stroke();
			context.closePath();
			context.beginPath();
			context.moveTo(left + this.distance, top + this.distance);
			context.lineTo(left + this.distance * 3, top + this.distance);
			context.stroke();
			context.closePath();
		}
		if (y > 0) {
			context.beginPath();
			context.moveTo(left - this.distance, top - this.distance);
			context.lineTo(left - this.distance, top - this.distance * 3);
			context.stroke();
			context.closePath();
			context.beginPath();
			context.moveTo(left - this.distance, top - this.distance);
			context.lineTo(left - this.distance * 3, top - this.distance);
			context.stroke();
			context.closePath();
			context.beginPath();
			context.moveTo(left - this.distance, top + this.distance);
			context.lineTo(left - this.distance, top + this.distance * 3);
			context.stroke();
			context.closePath();
			context.beginPath();
			context.moveTo(left - this.distance, top + this.distance);
			context.lineTo(left - this.distance * 3, top + this.distance);
			context.stroke();
			context.closePath();
		}
	};

	centers = function() {
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		this.center(3, 0, "black", 1);
		this.center(3, 2, "black", 1);
		this.center(3, 4, "black", 1);
		this.center(3, 6, "black", 1);
		this.center(3, 8, "black", 1);
		this.center(2, 1, "black", 1);
		this.center(2, 7, "black", 1);
		this.center(6, 0, "black", 1);
		this.center(6, 2, "black", 1);
		this.center(6, 4, "black", 1);
		this.center(6, 6, "black", 1);
		this.center(6, 8, "black", 1);
		this.center(7, 1, "black", 1);
		this.center(7, 7, "black", 1);
		context.translate(-this.width, -this.height);
	};

	rects = function() {
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		context.beginPath();
		context.strokeStyle = "black";
		context.lineWidth = 3;
		context.strokeRect(-this.distance, -this.distance, this.width * 8 + this.distance * 2, this.height * 9 +
			this.distance * 2);
		context.stroke();
		context.closePath();
		context.translate(-this.width, -this.height);
	};

	texts = function() {
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		context.beginPath();
		context.fillStyle = "black";
		context.font = "28px '楷体' ";
		context.textBaseline = "middle";
		context.textAlign = "center";
		context.fillText("楚 河", this.width * 2, this.height * 4.5, this.width * 2);
		context.fillText("汉 界", this.width * 6, this.height * 4.5, this.width * 2);
		context.fill();
		context.closePath();
		context.translate(-this.width, -this.height);
	};

	piece = function(x, y, color, name, view) {
		if (view == "black") {
			x = 9 - x;
			y = 8 - y;
		}
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		context.beginPath();
		context.fillStyle = "gray";
		context.arc(y * this.width, x * this.height, Math.min(this.width, this.height) / 2 - 2, 0, Math.PI * 2);
		context.fill();
		context.closePath();
		context.beginPath();
		context.fillStyle = color;
		context.arc(y * this.width, x * this.height, Math.min(this.width, this.height) / 2 - 5, 0, Math.PI * 2);
		context.fill();
		context.beginPath();
		context.fillStyle = "AliceBlue";
		context.font = "28px 楷体 ";
		context.textBaseline = "middle";
		context.textAlign = "center";
		context.fillText(name, y * this.width, x * this.height, Math.min(this.width, this.height));
		context.closePath();
		context.translate(-this.width, -this.height);
	};

	pieces = function(pieces, view) {
		for (let i = 0; i < pieces.length; i++) {
			let piece = pieces[i];
			this.piece(piece.x, piece.y, piece.color, piece.name, view);
		}
	};

	numbers = function(view) {
		let context = this.canvas.getContext("2d");
		let numberRed = "一二三四五六七八九";
		let numberBlack = "123456789";
		context.beginPath();
		context.fillStyle = "black";
		context.font = "18px 楷体";
		context.textBaseline = "middle";
		context.textAlign = "center";
		if (view == "black") {
			for (let i = 0; i < 9; i++) {
				context.fillText(numberRed[i], (i + 1) * this.width, this.height / 2);
				context.fillText(numberBlack[8 - i], (i + 1) * this.width, this.height * 10.5);
			}
		} else {
			for (let i = 0; i < 9; i++) {
				context.fillText(numberBlack[i], (i + 1) * this.width, this.height / 2);
				context.fillText(numberRed[8 - i], (i + 1) * this.width, this.height * 10.5);
			}
		}
		context.closePath();
	};

	select = function(x, y, view) {
		if (view == "black") {
			x = 9 - x;
			y = 8 - y;
		}
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		let left = y * this.width;
		let top = x * this.height;
		context.beginPath()
		context.lineWidth = 2;
		context.strokeStyle = "blue";
		context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
		context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top - this.height / 2 + 2);
		context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
		context.lineTo(left - this.width / 2 + 2, top - this.height / 2 + this.distance * 2 + 2);
		context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
		context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top + this.height / 2 - 2);
		context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
		context.lineTo(left - this.width / 2 + 2, top + this.height / 2 - this.distance * 2 - 2);
		context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
		context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top + this.height / 2 - 2);
		context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
		context.lineTo(left + this.width / 2 - 2, top - this.height / 2 + this.distance * 2 + 2);
		context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
		context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top - this.height / 2 + 2);
		context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
		context.lineTo(left + this.width / 2 - 2, top + this.height / 2 - this.distance * 2 - 2);
		context.stroke();
		context.closePath();
		context.translate(-this.width, -this.height);
	};

	selects=function(selects,view){
		for(let i=0;i<selects.length;i++){
			let select=selects[i];
			this.select(select.x,select.y,view);
		}
	};
	
	may=function(x,y,view){
		if (view == "black") {
			x = 9 - x;
			y = 8 - y;
		}
		let context = this.canvas.getContext("2d");
		context.translate(this.width, this.height);
		let left = y * this.width;
		let top = x * this.height;
		context.beginPath()
		context.lineWidth = 2;
		context.strokeStyle = "green";
		context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
		context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top - this.height / 2 + 2);
		context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
		context.lineTo(left - this.width / 2 + 2, top - this.height / 2 + this.distance * 2 + 2);
		context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
		context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top + this.height / 2 - 2);
		context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
		context.lineTo(left - this.width / 2 + 2, top + this.height / 2 - this.distance * 2 - 2);
		context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
		context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top + this.height / 2 - 2);
		context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
		context.lineTo(left + this.width / 2 - 2, top - this.height / 2 + this.distance * 2 + 2);
		context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
		context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top - this.height / 2 + 2);
		context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
		context.lineTo(left + this.width / 2 - 2, top + this.height / 2 - this.distance * 2 - 2);
		context.stroke();
		context.closePath();
		context.translate(-this.width, -this.height);
	};
	mays=function(mays,view){
		for(let i=0;i<mays.length;i++){
			let may=mays[i];
			this.may(may.x,may.y,view);
		}
	};
}
